<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>MOON</title>
    <link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/menu/metisMenu.css}"/>
    <link rel="stylesheet" th:href="@{/menu/vertical.css}"/>
</head>
<body class="bg-a">
<div class="container-fluid h-100" style="overflow: hidden;">
    <!-- 标题栏 -->
    <div class="row">
        <div class="col"></div>
        <div class="col">
            <h5 class="text-center">
                <i class="fa fa-telegram"></i>&nbsp;WN32-JAVA
            </h5>
        </div>
        <div class="col text-right">
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-success dropdown-toggle"
                        data-toggle="dropdown">
                    <i class="fa fa-user-o"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:"
                       onclick="showCenter();">账号&nbsp;<span id="account" th:text="${session.admin?.account}"></span></a><a
                        class="dropdown-item" href="javascript:" onclick="logout();">注销</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="height: 88%;">
        <!-- 左侧 -->
        <div class="col-sm-2">
            <div class="sidebar-nav mt-1">
                <div class="metismenu">
                    <ul>
                        <li><a href="javascript:" class="has-arrow">基础练习</a>
                            <ul>
                                <li><a href="javascript:" class="has-arrow" work="proc"
                                       onclick="openWork(this);">面向过程</a></li>
                                <li><a href="javascript:" class="has-arrow" work="crud"
                                       onclick="openWork(this);">增删改查</a></li>
                                <li><a href="javascript:" class="has-arrow" work="other"
                                       onclick="openWork(this);">杂类实验</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:" class="has-arrow">redis练习</a>
                            <ul>
                                <li><a href="javascript:" class="has-arrow" work="redopr"
                                       onclick="openWork(this);">基础操作</a></li>
                                <li><a href="javascript:" class="has-arrow" work="cache"
                                       onclick="openWork(this);">redis做缓存</a></li>
                                <li><a href="javascript:" class="has-arrow" work="search"
                                       onclick="openWork(this);">全文检索</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:" class="has-arrow">MQ练习</a>
                            <ul>
                                <li><a href="javascript:" class="has-arrow" work="MQ"
                                       onclick="openWork(this);">MQ基础操作</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:" class="has-arrow">轮询练习</a>
                            <ul>
                                <li><a href="javascript:" class="has-arrow" work="push-1"
                                       onclick="openWork(this);">短轮询</a></li>
                                <li><a href="javascript:" class="has-arrow" work="push-2"
                                       onclick="openWork(this);">长轮询</a></li>
                                <li><a href="javascript:" class="has-arrow" work="push-3"
                                       onclick="openWork(this);">WebSocket</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:" class="has-arrow">es练习</a>
                            <ul>
                                <li><a href="javascript:" class="has-arrow" work="essearch"
                                       onclick="openWork(this);">es练习</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 工作区 -->
        <div class="col-sm-10">
            <div id="work" class="h-100" style="margin-right: -32px;">
                <iframe src="/openWork/welcome" frameborder="0" width="100%"
                        height="100%"></iframe>
            </div>
        </div>
    </div>
</div>
<!-- js -->
<script th:src="@{/moon/js/jquery.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/menu/metisMenu.js}"></script>
<script th:src="@{/moon/js/popper.js}"></script>
<script th:src="@{/moon/js/bootstrap.js}"></script>
<script th:inline="javascript">
    //metisMenu
    $(".metismenu").metisMenu();

    //openWork
    function openWork(obj) {
        var iframe = "<iframe src='/openWork/" + $(obj).attr("work")
            + "' frameborder=0 width=100% height=100%></iframe>";
        $("#work").html(iframe);
    }

    //showCenter
    function showCenter() {
        //
    }

    //logout
    function logout() {
        //
    }
</script>
</body>
</html>